<template>
    <div class="home">
        <section class="hero">
            <h1>欢迎来到简约博客</h1>
            <p>一个分享知识和想法的简约空间</p>
        </section>

        <section class="featured-posts">
            <h2>精选文章</h2>
            <div class="post-grid">
                <div
                    v-for="post in featuredPosts"
                    :key="post.id"
                    class="post-card"
                >
                    <div
                        class="post-image"
                        :style="{ backgroundImage: `url(${post.image})` }"
                    ></div>
                    <div class="post-content">
                        <span class="post-date">{{ post.date }}</span>
                        <h3 class="post-title">{{ post.title }}</h3>
                        <p class="post-excerpt">{{ post.excerpt }}</p>
                        <router-link :to="`/blog/${post.id}`" class="read-more">
                            阅读更多
                        </router-link>
                    </div>
                </div>
            </div>
        </section>

        <section class="categories">
            <h2>文章分类</h2>
            <div class="category-list">
                <div
                    v-for="category in categories"
                    :key="category.id"
                    class="category-item"
                >
                    <div class="category-icon">
                        <i :class="category.icon"></i>
                    </div>
                    <h3>{{ category.name }}</h3>
                    <p>{{ category.count }} 篇文章</p>
                </div>
            </div>
        </section>
        <!-- <button @click="handleClick">使用字符串传参</button>
        <button @click="handleClick2">使用params传参</button> -->
    </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
// // 字符串传参和query传参练习
// const router = useRouter();
// const handleClick = () => {
//     // router.push("/blog/2");
//     router.push(`/blog/${2}`);
//     // router.push(`/blog?id=2&title=使用CSS Grid布局网页`);
// };
// const handleClick2 = () => {
//     router.push({
//         path: "/blog",
//         query: { id: 2, title: "使用CSS Grid布局网页" },
//     });
// };

// 模拟数据
const featuredPosts = ref([
    {
        id: 1,
        title: "如何开始一个Vue.js项目",
        excerpt:
            "Vue.js是一个流行的JavaScript框架，本文将介绍如何快速搭建一个Vue项目...",
        date: "2023-03-15",
        image: "https://picsum.photos/id/1/600/400",
    },
    {
        id: 2,
        title: "使用CSS Grid布局网页",
        excerpt: "CSS Grid是一种强大的布局工具，可以轻松创建复杂的网页布局...",
        date: "2023-03-10",
        image: "https://picsum.photos/id/2/600/400",
    },
    {
        id: 3,
        title: "JavaScript异步编程指南",
        excerpt:
            "异步编程是JavaScript中的重要概念，本文将介绍Promise、async/await等技术...",
        date: "2023-03-05",
        image: "https://picsum.photos/id/3/600/400",
    },
]);

const categories = ref([
    { id: 1, name: "前端开发", count: 12, icon: "code" },
    { id: 2, name: "后端技术", count: 8, icon: "server" },
    { id: 3, name: "设计灵感", count: 6, icon: "paint-brush" },
    { id: 4, name: "职业发展", count: 4, icon: "briefcase" },
]);
</script>

<style scoped>
.home {
    padding-bottom: 60px;
}

.hero {
    text-align: center;
    padding: 60px 0;
    margin-bottom: 40px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 15px;
    color: #3498db;
}

.hero p {
    font-size: 1.2rem;
    color: #777;
    max-width: 600px;
    margin: 0 auto;
}

.featured-posts,
.categories {
    margin-bottom: 60px;
}

.featured-posts h2,
.categories h2 {
    font-size: 1.8rem;
    margin-bottom: 30px;
    position: relative;
    padding-bottom: 10px;
}

.featured-posts h2:after,
.categories h2:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background-color: #3498db;
}

.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.post-card {
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.post-image {
    height: 200px;
    background-size: cover;
    background-position: center;
}

.post-content {
    padding: 20px;
}

.post-date {
    display: block;
    font-size: 0.9rem;
    color: #777;
    margin-bottom: 10px;
}

.post-title {
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.post-excerpt {
    color: #555;
    margin-bottom: 15px;
    line-height: 1.5;
}

.read-more {
    display: inline-block;
    font-weight: 500;
}

.category-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.category-item {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.category-item:hover {
    transform: translateY(-5px);
}

.category-icon {
    font-size: 2rem;
    margin-bottom: 15px;
    color: #3498db;
}

.category-item h3 {
    margin-bottom: 5px;
}

.category-item p {
    color: #777;
    font-size: 0.9rem;
}
</style>
